<template>
  <div style="display: flex; flex-direction: row">
    <div style="display: flex; flex-direction: column; width: 60vw">
      <!-- <Carousel v-bind:pictures="pictures"> </Carousel> -->
      <div style="display: flex; flex-direction: row-reverse; width: 60vw">
        <div style="flex: 1">
          <a-card hoverable style="width: 100%">
            <a-card-meta :title="publisherInfo.userName">
              <a-avatar
                slot="avatar"
                :src="publisherInfo.avatar"
              />
            </a-card-meta>
          </a-card>
          <p></p>
          <a-card hoverable style="width: 100%">
            <p>活动名称: {{ activityInfo.activityName }}</p>
            <p>活动类型: {{ activityInfo.activityKind }}</p>
            <p>活动地点: {{ activityInfo.activityLocation }}</p>
            <p>开始时间: {{ startTime }}</p>
            <p>结束时间: {{ endTime }}</p>
          </a-card>
        </div>
        <div style="flex: 2">
          <Carousel :pictures="pictures" alt="活动图片" style="width: 40vw" />
        </div>
      </div>

      <a-card hoverable style="margin-top: 5vh">
        <p>
          {{ activityInfo.activityProfile }}
        </p>
      </a-card>
    </div>
    <div
      style="
        display: flex;
        flex-direction: column-reverse;
        margin-start: 5vw;
        padding-bottom: 15vh;
      "
    >
      <a-button
        type="primary"
        style="height: 6em; width: 6em"
        :loading="loading"
        @click="joinActivity"
        >申请<br />加入</a-button
      >
    </div>
  </div>
</template>

<script>
import requestUtils from "../../utils/requestUtils";
import utils from "../../utils/utils";
import Carousel from "./carousel.vue";

export default {
  name: "DetailCard",
  components: {
    Carousel,
  },
  props: {
    pictures: Array,
    activityInfo: Object,
    publisherInfo: Object,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    startTime: function () {
      return utils.formatTime(new Date(this.activityInfo.activityStart));
    },
    endTime: function () {
      return utils.formatTime(new Date(this.activityInfo.activityEnd));
    },
  },
  methods: {
    joinSuccess: function (res) {
      if (res.data.error_code == 0) {
        this.$message.success("参与成功，等待发布者审批");
      } else {
        this.$message.warning(res.data.error_msg);
      }
      this.loading = false;
    },
    joinFail: function (error) {
      this.loading = false;
      this.$message.error(error);
    },
    joinActivity: function () {
      this.loading = true;
      requestUtils.requestJoinActivity(
        this,
        this.activityInfo.activityId,
        this.joinSuccess,
        this.joinFail
      );
    },
  },
};
</script>

<style scoped>
</style>